<template>
  <form role="form" @submit.prevent="onSubmit" autocomplete="off" novalidate>
    <slot></slot>
  </form>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { Values, Rules } from "../validate";
import useForm from "./useForm";

export default defineComponent({
  name: "ZForm",
  props: {
    model: {
      type: Object as PropType<Values>,
      default: () => ({}),
    },
    rules: {
      type: Object as PropType<Rules>,
      default: () => ({}),
    },
  },
  emits: ["success", "failure"],
  setup(props, { emit }) {
    const { handleSubmit, validate, setErrors, reset } = useForm(
      props.model,
      props.rules
    );
    const onSubmit = handleSubmit(
      (values) => emit("success", values),
      (errors) => emit("failure", errors)
    );
    return {
      onSubmit,
      validate,
      reset,
      setErrors,
    };
  },
});
</script>
<style>
form[role="form"] {
  background: var(--base-100);
  padding: 2rem 1rem;
  border-radius: 0.5rem;
}
</style>
